<template>
  <div class="user">
    <div class="user-container">
      <label>
        <i>*</i><span>中文姓名</span>
        <input placeholder="请输入中文姓名" type="text" v-model="username"/>
      </label>
      <label>
        <i>*</i><span>证件号码</span>
        <input placeholder="请输入证件号码" type="text" v-model="idcard"/>
      </label>
      <label>
        <i>*</i><span>手机号码</span>
        <input placeholder="请输入手机号码" type="text" v-model="phone"
               @input="vailPhone"/>
      </label>
      <span v-show="isShow" class="user-message">请输入正确的手机格式</span>
      <Upload2 @listen1="readCard"></Upload2>
      <div class="btn">
      <el-button type="primary" class="logFalse" @click="handleSave" id="next">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Upload2 from './upload/Upload2.vue'
import router from '../router'

export default {
  name: 'User',
  data () {
    return {
      username: '',
      idcard: '',
      phone: '',
      applNo: '',
      cardUrl: '',
      id: '',
      detailId: '',
      isShow: false,
    }
  },

  methods: {

    //手机校验-->> 11位
    vailPhone () {
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!myreg.test(this.phone)) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },

    readCard (name_data, card_data, cardURL_data, applNo_data, phone_data, pieceId_data) {
      this.username = name_data
      this.idcard = card_data
      this.cardUrl = cardURL_data
      this.applNo = applNo_data
      this.phone = phone_data
      this.id = pieceId_data
      var nextP = document.querySelector('#next')
      nextP.setAttribute('class', 'log el-button')
    },
    handleSave () {
      var obj = new Object()
      obj['id'] = this.id
      obj['applicationNum'] = this.applNo
      obj['phoneNum'] = this.phone
      obj['name'] = this.username
      obj['cardId'] = this.idcard
      obj['status'] = 0
      obj['gmtCreateBy'] = 'sysadmin'
      obj['gmtUpdateBy'] = 'sysadmin'
      obj['productCode'] = sessionStorage.getItem('productId')

      if (this.cardUrl == '') {
        this.$message.error('未上传身份证!')
        return
      }

      if (this.phone == '' || this.username == '' || this.idcard == '') {

        this.$message.error('姓名或身份证号或电话号不为空!')
        return
      }

      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!myreg.test(this.phone)) return

      this.axios.post('/zyapply-api/tblInfoPieces', JSON.stringify(obj), {headers: {'Content-Type': 'application/json;charset=UTF-8'}}).then((result) => {

        if (result.data.status == 200) {

          var info = result.data.data
          this.$store.commit('cardUrl', this.cardUrl)
          this.$store.commit('pieceId', info.id)
          this.$store.commit('applNo', info.applicationNum)
          this.$store.commit('detailId', this.detailId)  
          this.$store.commit('title', '远程身份校验')
          router.push({
            path: '/takephoto',
            query: {pieceId: info.id, applNo: info.applicationNum, detaild: this.detailId}
          })
        } else {
          //alert(result.data.msg)
          this.$message.error('出错了！');
          var nextP = document.querySelector('#next')
          nextP.setAttribute('class', 'logFalse el-button')
        }

      })
    }
  },
  components: {
    Upload2,
  },
  mounted () {
    this.$store.commit('title', '读取身份证')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .user {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .user-container{
      display: flex;
      flex-direction: column;
    
    label {
      padding: 15px;
      display: block;
      font-size: 18px;
      i {
        font-size: 28px;
        color: red;
        padding: 5px;
        // baseline-shift: super;
        vertical-align: -webkit-baseline-middle;
        line-height: 18px;
      }
      input {
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 18px;
        padding: 10px 20px;
      }
      input:focus {
        border: 1px solid #3A88FD;
      }

    }
    }
    .user-message {
      font-size: 18px;
      color: #f00;
      padding-left: 115px;
    }
    .btn{
      display: flex;
      justify-content: center;
    .log {
      color: #fff;
      border-color: #409EFF;
      background-color: #409EFF;
      margin-top: 50px;
      min-width: 200px;
    }
    .logFalse {
      color: #fff;
      border-color: #ccc;
      background-color: #ccc;
      margin-top: 50px;
      min-width: 200px;
    }
  }
  }
</style>
